<script setup>
import { useRoute } from "vue-router";
import { useSearchStore } from "@/store/useSearchStore";

import { storeToRefs } from 'pinia'

const route = useRoute();

const store = useSearchStore()
const { searchOpen,  } = storeToRefs(store);
const {toggleSearch} = store;


const handleToggleSearch = () => {
  if (route.name !== "search") {
    toggleSearch();
  }
};
</script>
<template>
  <nav
    class="fixed right-0 bottom-0 left-0 z-10 h-[45px] bg-black xl:top-0 xl:right-auto xl:w-[100px] xl:h-full border-r border-solid border-secondary"
  >
    <ul class="flex h-full xl:flex-col">
      <li class="flex-auto h-full xl:flex-initial xl:h-[100px]">
        <router-link
          activeClass="opacity-100 group"
          class="flex items-center justify-center size-full transition-all duration-200 hover:opacity-80 focus:opacity-80"
          :to="{ name: 'index' }"
          aria-label="Home"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <g
              class="group-hover:stroke-primary group-focus:stroke-primary"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-miterlimit="10"
              stroke-linejoin="round"
            >
              <path
                d="M8.5 23.2H1.3V9L12 .8 22.7 9v14.2h-7.2v-5c0-1.9-1.6-3.4-3.5-3.4s-3.5 1.5-3.5 3.4v5z"
              />
            </g>
          </svg>
        </router-link>
      </li>
      <li class="flex-auto h-full xl:flex-initial xl:h-[100px]">
        <router-link
          activeClass="opacity-100 group"
          class="flex items-center justify-center size-full transition-all duration-200 hover:opacity-80 focus:opacity-80"
          :to="{ name: 'movie' }"
          aria-label="Movies"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <g
              class="group-hover:stroke-primary group-focus:stroke-primary"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linejoin="round"
              stroke-linecap="round"
            >
              <path
                d="M3.2 12.8h19.6v9.5c0 .5-.4.9-1 .9H4.1c-.5 0-1-.4-1-.9v-9.5"
              />
              <path
                d="M3.3 13.1l-2-4.4c-.2-.5 0-1 .5-1.2L18 .8c.5-.2 1.1 0 1.3.5l1.8 4-17.5 7.3"
              />
              <path d="M15 2.1l-.9 6M8 4.7l-1.2 6.6" />
            </g>
          </svg>
        </router-link>
      </li>
      <li class="flex-auto h-full xl:flex-initial xl:h-[100px]">
        <router-link
          activeClass="opacity-100 group"
          class="flex items-center justify-center size-full transition-all duration-200 hover:opacity-80 focus:opacity-80"
          :to="{ name: 'tv' }"
          aria-label="TV Shows"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <g
              class="group-hover:stroke-primary group-focus:stroke-primary"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-miterlimit="10"
            >
              <path
                d="M21.4 23H2.6c-.9 0-1.6-.7-1.6-1.6V8.9c0-.9.7-1.6 1.6-1.6h18.9c.8 0 1.5.7 1.5 1.6v12.6c0 .8-.7 1.5-1.6 1.5zM6.4 1L12 7M17.6 1L12 7"
              />
            </g>
          </svg>
        </router-link>
      </li>
      <li class="flex-auto h-full xl:flex-initial xl:h-[100px]">
        <button
          class="search-toggle flex items-center justify-center size-full transition-all duration-200 hover:opacity-80 focus:opacity-80"
          type="button"
          aria-label="Search"
          aria-haspopup="true"
          :aria-expanded="`${searchOpen}`"
          @click="handleToggleSearch"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <g
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-miterlimit="10"
            >
              <path d="M16.4 16.7l6.3 6.5" />
              <ellipse cx="10.5" cy="9.8" rx="9.2" ry="9.1" />
            </g>
          </svg>
        </button>
      </li>
    </ul>
  </nav>
</template>
